<template>
  <div class="chat">
    <div class="uop">
        <van-icon name="arrow-left"  @click="fun()"/>
        <div class="text">
            <span class="name">{{this.$route.params.chatrouter.name}}</span>
            <span class="position">{{this.$route.params.chatrouter.job}}</span>
        </div>
        <section >
            <van-cell is-link @click="showPopup">...</van-cell>
                <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
                <van-popup
                      v-model="show"
                      closeable
                      position="bottom"
                      :style="{ height: '30%' }"
                    />
        </section>
    </div>
    <section class="bottom">
        <div><van-icon name="phone-o" /> <span>打电话</span> </div>
        <div><van-icon name="chat-o" /><span>发微信</span></div>
        <div><van-icon name="envelop-o" /><span>简历</span></div>
        <div><van-icon name="cross" /><span>不感兴趣</span></div>
    </section>
    <main>
      <div class="txt" @click="Router(v)">
        <div class="one">
        <b>{{this.$route.params.chatrouter.job}}</b>
        <span class="green">{{this.$route.params.chatrouter.distance}}</span>
      </div>
      <div class="two">
        <b>{{this.$route.params.chatrouter.jobname}}</b>
      </div>
      <div class="jingyan">
        <div>西安</div>
        <div>经验不限</div>
        <div>大专</div>
      </div>
      <div class="text">
        {{this.$route.params.chatrouter.position}}
      </div>
      <div class="name">
        {{this.$route.params.chatrouter.jobcontentone}}
      </div>
      <div class="bottom">
        查看了您
       </div> 
      </div>
    </main>
    <div class="news">
        <div class="img">
        <img :src=" this.$route.params.chatrouter.img" alt="">
        </div>
        <div class="textOne">{{this.$route.params.chatrouter.text}}</div>
    </div>
  </div>
</template>

<script>

export default {
    name: '',
    data() {
    return {
      show: false, 
      id: '',
    };
  },

    methods:{
    fun(){
        this.$router.push("/chatone")
    },
    Router(v){
              this.$router.push({
                name:'details',
                params:{ details: v}
              })
            },
    showPopup() {
      this.show = true;
    },
    }
}


</script>

<style lang="scss" scoped>
    * {
 padding: 0;
 margin: 0;
 /* 将所有的标签变成怪异盒子 */
 box-sizing: border-box;
 font-size: 0.16rem;
}
.chat{
    background-color: #f6f6f6;
    height: 50rem;
    .uop{
        padding: 1.25rem;
        height: 2.125rem;
        display:flex;
        align-items: center;
        justify-content: space-between;
        .return{
            font-size: 1rem;
        }
        .text{
            display: flex;
            flex-direction: column;
            .name{
                font-size: 1rem;
                font-weight: 700;
            }
        }
        .position{
            font-size: .75rem;
        }
    }
    .bottom{
        display: flex;
        justify-content: space-around;
       div{
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #afafaf;
        i{
            font-size: 1.375rem;
        }
       }
    }
    main{
        display: flex;
        flex-direction: column;
        background-color: #f6f6f6;
        .txt{
           width: 21.25rem;
           padding: 1.25rem;
           background-color: white;
           margin: 0 auto;
           margin-top: 1.25rem;
           .one,.two{
            display: flex;
            justify-content: space-between;
            height: 1.875rem;
        }
        .jingyan{
            display: flex;
            height: 1.875rem;
         div{
            height: .9375rem;
            margin-right: .3125rem;
            background-color:#f7f7f7 ;
             }
            }
            text{

            } 
            .name{
              
            }   
        }
    }
    .news{
        margin: 1.25rem;
        display: flex;
        .img{
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
        }
        .textOne{
            width: 15.625rem;
            height: 3.125rem;
            background-color: white;
            border-radius: 5px;
            padding: .3125rem;

        }
    }
}
</style>